import React, { Component } from 'react'
import { Upload, Form, Input, Select, Button, Space } from 'antd';
import { LoadingOutlined, PlusOutlined } from '@ant-design/icons';
// import moduleName from '../../../redux/actions/addNewDoctor'
import {connect} from 'react-redux'         //引入连接connect
import {addNewDoctor} from '../../../redux/actions/addNewDoctor'
import {nanoid} from 'nanoid'

// import PubSub from 'pubsub-js'
const { Option } = Select;
const { TextArea } = Input;


class doctorAdd extends Component {
    state = {
        formRef : React.createRef(),
        loading: false,
        titles: ['主任', '副主任', '主治医师', '副主治医师', '实习医生'],
        offices: ['骨科', '内科', '外科', '妇科', '儿科', '脑科'],
        setName: '',
        setTel: '',
        setOffice: '',
        setTitle: '',
        setSkilled: '',
        setBrief: ''
    };
    UNSAFE_componentWillMount(){
        console.log(this.props);
    }
    getBase64 = (img, callback) => {
        console.log(img, callback);
        const reader = new FileReader();
        reader.addEventListener('load', () => callback(reader.result));
        reader.readAsDataURL(img);
        // console.log(img);
    }

    // getBase64 = (file) => {
    //     return new Promise((resolve, reject) => {
    //         const reader = new FileReader();
    //         reader.readAsDataURL(file);
    //         reader.onload = () => resolve(reader.result);
    //         reader.onerror = error => reject(error);
    //     });
    // }

    handleChange = info => {
        console.log(info);
        if (info.file.status === 'uploading') {
            console.log('执行uploading...');
            this.setState({ loading: true });
            return;
        }
        // if (info.file.status === 'done') {
        console.log('执行done...', info.file);
        // console.log(info.file.originFileObj, imageUrl);
        this.getBase64(info.file.originFileObj, imageUrl =>
            this.setState({
                imageUrl,
                loading: false
            }),
        );

        // }
        setTimeout(() => {
            console.log(this.state);
        }, 100);
    };
    // 数据改变state
    handleChange = (dateType) => {
        return (event) => {
            // console.log(dateType, event);
            if (event.target) {
                this.setState({ [dateType]: event.target.value })
            } else {
                this.setState({ [dateType]: event })
            }
            // setTimeout(() => {
            //     console.log(this.state);
            // }, 100);
            // console.log(this.state.setName,this.state.setOffice,this.state.setTitle);
        }
    }
    // 提交数据
    onSub = () => {
        const a = {
            key:nanoid(),
            name: this.state.setName,
            tel:this.state.setTel,
            office:this.state.setOffice,
            title:this.state.setTitle,
            skilled:this.state.setSkilled,
            brief: this.state.setBrief,
            condition:1
        }
        this.props.addNewDoctor(a)
        this.props.history.push('/doctorList')
        // PubSub.publish('addDoctor', a)
        console.log('提交了新医生...',this.state);
    }
    // 重置数据
    handreset = () => {
        console.log( this.state.formRef);
        this.state.formRef.current.resetFields()
        // this.setState({
        //     setName: '',
        //     setTel: '',
        //     setOffice: '',
        //     setTitle: '',
        //     setSkilled: '',
        //     setBrief: ''
        // })
        // setTimeout(() => {
        //     console.log(this.state);
        // }, 100);
        // this.forceUpdate()
    }

    render() {
        console.log('已触发render...');
        const { loading, imageUrl } = this.state;
        const uploadButton = (
            <div>
                {loading ? <LoadingOutlined /> : <PlusOutlined />}
                <div style={{ marginTop: 8 }}>Upload</div>
            </div>
        );
        const onFinish = values => {
            console.log('Received values of form: ', values);
        };
        return (
            <div>
                <Form name="complex-form" ref={this.state.formRef} autoComplete = "off" onFinish={onFinish} labelCol={{ span: 8 }} wrapperCol={{ span: 16 }}>
                    <Form.Item label="头像">
                        <Upload
                            name="avatar"
                            listType="picture-card"
                            className="avatar-uploader"
                            showUploadList={false}
                            action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
                            // beforeUpload={beforeUpload}
                            onChange={this.handleChange}
                        >
                            {imageUrl ? <img src={imageUrl} alt="avatar" style={{ width: '100%' }} /> : uploadButton}
                        </Upload>
                    </Form.Item>


                    <Form.Item label="姓名">
                        <Space>
                            <Form.Item
                                name="username"
                                noStyle
                                rules={[{ required: true, message: '请输入姓名' }]}
                            >
                                <Input style={{ width: 160 }} values={this.state.setName} onChange={this.handleChange('setName')} placeholder="请输入姓名" />
                            </Form.Item>
                        </Space>
                    </Form.Item>
                    <Form.Item label="电话">
                        <Space>
                            <Form.Item
                                name="tel"
                                noStyle
                                rules={[{ required: true, message: '请输入电话' }]}
                            >
                                <Input style={{ width: 160 }} values={this.state.setTel} onChange={this.handleChange('setTel')} placeholder="请输入电话" />
                            </Form.Item>
                        </Space>
                    </Form.Item>

                    <Form.Item label="科室">
                        <Input.Group compact>
                            <Form.Item
                                name={['office', 'province']}
                                noStyle
                                rules={[{ required: true, message: '请选择科室' }]}
                            >
                                <Select placeholder="请选择科室" value={this.state.setOffice} onChange={this.handleChange('setOffice')}>
                                    {this.state.offices.map((item, index) => {
                                        return <Option value={item} key={index}>{item}</Option>
                                    })}
                                </Select>
                            </Form.Item>
                        </Input.Group>
                    </Form.Item>

                    <Form.Item label="职称">
                        <Input.Group compact>
                            <Form.Item
                                name={['title', 'province']}
                                noStyle
                                rules={[{ required: true, message: '请选择职称' }]}
                            >
                                <Select placeholder="请选择职称" value={this.state.setTitle} onChange={this.handleChange('setTitle')}>
                                    {this.state.titles.map((item, index) => {
                                        return <Option value={item} key={index}>{item}</Option>
                                    })}
                                </Select>
                            </Form.Item>
                        </Input.Group>
                    </Form.Item>

                    <Form.Item label="擅长" style={{ marginBottom: 0 }}>
                        <Form.Item
                            name="skilled"
                            rules={[{ required: true, message: '请写入擅长方面' }]}
                            style={{ display: 'inline-block', width: 'calc(50% - 8px)' }}
                        >
                            <TextArea showCount maxLength={100} value={this.state.setSkilled} onChange={this.handleChange('setSkilled')} placeholder="请写入擅长方面..." />
                        </Form.Item>
                    </Form.Item>
                    <Form.Item label="简介" style={{ marginBottom: 0 }}>
                        <Form.Item
                            name="brief"
                            rules={[{ required: true, message: '请写入简介内容' }]}
                            style={{ display: 'inline-block', width: 'calc(50% - 8px)' }}
                        >
                            <TextArea showCount maxLength={100} value={this.state.setBrief} onChange={this.handleChange('setBrief')} placeholder="请写入简介内容..." />
                        </Form.Item>
                    </Form.Item>


                    <Form.Item label=" " colon={false}>
                        <Button type="primary" htmlType="submit" onClick={this.onSub}>
                            保存
                        </Button>&nbsp;
                        <Button style={{ marginLeft: 20 }} onClick={this.handreset}>
                            重置
                        </Button>
                    </Form.Item>
                </Form>
            </div>
        );

    }


}
export default connect(
    state=>({doctorInfo:state}),      //映射状态
    {addNewDoctor}       //映射操作状态的方法
)(doctorAdd)
